<template>
  <div
    class="copyright-box"
    :class="{ 'copyright-box-loop': route.meta.loopType }"
    style="display: flex; justify-content: space-between; flex-direction: column"
  >
    <div>
      <div class="title">
        <titles title="文创商品" />
      </div>
      <t-row :gutter="20" style="margin-top: 50px" v-if="total > 0">
        <t-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3" v-for="item in list" :key="item.id">
          <div class="item-box" @click="pathLink(item.url)">
            <img
              class="item-img"
              v-if="!item.coverUrl"
              src="http://101.34.143.36:8890/api/image/387939155165253"
              alt=""
            />
            <img
              class="item-img"
              v-else
              :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/1/h/210/format/webp')"
              alt=""
            />
            <div class="item-content">
              <p class="item-title1">{{ item.name }}</p>
              <div class="item-btm" v-if="item.price">
                <span class="item-title2"><span style="font-size: 14px">￥</span>{{ item.price }}</span>
                <span class="item-title3">参考价</span>
              </div>
              <div v-else class="item-btm">
                <!-- <span class="item-title2"><span style="font-size: 14px"></span></span> -->
                <span class="item-title3" style="margin: 0">暂无价格</span>
              </div>
            </div>
          </div>
        </t-col>
      </t-row>
      <div v-else style="position: absolute; top: 50%; left: 50%">暂无相关数据</div>
    </div>
    <t-row style="margin-top: 26px" v-if="total > 8">
      <t-col
        :span="12"
        :class="{
          't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
          't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
          't-pagination2': store.styleInfo.themeColor == '#B9463F',
          't-pagination3': store.styleInfo.themeColor == '#343029',
          't-pagination4': store.styleInfo.themeColor == '#171719',
        }"
        style="display: flex"
      >
        <t-pagination
          v-model="parmas.pageNo"
          v-model:pageSize="parmas.pageSize"
          :total="total"
          :showPageSize="false"
          show-jumper
          @change="onChange"
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
        <t-button
          @click="init()"
          :style="{ background: store.styleInfo.themeColor, borderColor: store.styleInfo.themeColor }"
          >确定</t-button
        >
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import titles from '@/components/title/title.vue';
import { urls } from '@/utils/request/upload';
import { goodsList } from '@/api/goods/goods';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { useRoute } from 'vue-router';

const store = useProjectStore();
const route = useRoute();
const current = ref(1);
const pageSize = ref(20);
const parmas = reactive({
  value: '',
  pageNo: 1,
  pageSize: 8,
});
const list = ref([]);
const total = ref(0);
const loading = ref(false);

const init = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await goodsList(localStorage.getItem('projectId'), parmas);
    total.value = res.data.total;
    list.value = res.data.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
init();
const onPageSizeChange = (size) => {
  init();
  // //console.log('page-size:', size);
  // MessagePlugin.success(`pageSize变化为${size}`);
};

const onCurrentChange = (index, pageInfo) => {
  init();
  // MessagePlugin.success(`转到第${index}页`);
  // //console.log(pageInfo);
};

const onChange = (pageInfo) => {
  //console.log(pageInfo);
};
const pathLink = (url: string) => {
  if (!url) {
    return;
  }
  //console.log(url);
  window.open(url, '_blank');
};
</script>

<style lang="less" scoped>
.copyright-box {
  padding: 80px 0px;
  width: 1180px;
  margin: 0 auto;
  min-height: calc(@screen-hw-div-parent - 138px);
  min-height: calc(100vh - 138px);
}
.copyright-box-loop {
  min-height: calc(@screen-hw-div-parent-btn-loop - 138px);
}
.item-box {
  width: 100%;
  min-height: 316px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}
.item-img {
  width: 100%;
  height: 210px;
  // border-radius: 4px;
  // background: #666;
  object-fit: cover;
}
.t-col {
  margin-bottom: 24px;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.item-title1 {
  font-size: 18px;
  // font-weight: 500;
  color: #333333;
  line-height: 28px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 1; //行数
  line-clamp: 1;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
  line-height: 28px;
  height: 28px;
  font-family: none;
}
.item-btm {
  display: flex;
  align-items: center;
  height: 37px;
}
.item-title2 {
  font-size: 22px;
  // font-family: DIN-Medium, DIN;/
  font-weight: 500;
  color: #333333;
  line-height: 34px;
}
.item-title3 {
  font-size: 12px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 12px;
  margin-left: 6px;
}
.item-content {
  width: 100%;
  padding: 20px 24px;
}
.t-pagination0 {
  :deep(.t-is-current) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
    color: #fff !important;
  }
}
.t-pagination1 {
  :deep(.t-is-current) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
  :deep(.t-pagination__number:active) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
    color: #fff !important;
  }
}
.t-pagination2 {
  :deep(.t-is-current) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
  :deep(.t-pagination__number:active) {
    background: #b9463f !important;
    border-color: #b9463f !important;
    color: #fff !important;
  }
}
.t-pagination3 {
  :deep(.t-is-current) {
    background: #343029 !important;
    border-color: #343029 !important;
    color: #fff !important;
  }
  :deep(.t-pagination__number:active) {
    background: #343029 !important;
    border-color: #343029 !important;
    color: #fff !important;
  }
}
.t-pagination4 {
  :deep(.t-is-current) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #171719 !important;
    border-color: #171719 !important;
    color: #fff !important;
  }
}
/deep/.t-pagination__number:hover {
  border-color: var(--td-component-border);
  color: #333;
}
/deep/.t-is-current:hover {
  color: var(--td-text-color-anti);
}
/deep/.t-input:hover {
  border-color: var(--td-component-border);
}
/deep/.t-input.t-is-error {
  border-color: var(--td-component-border);
}
/deep/.t-input--focused {
  box-shadow: 0 0 0 0 !important;
}
/deep/.t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) {
  --ripple-color: none;
}
</style>
